<template>
  <div class="gasDetail-wrap">
    <!-- 商户信息 -->
    <div class="merchant-info">
      <el-form :model="merchantForm" label-width="110px">
        <div class="form-item-group">
          <el-form-item label="商户名称：" style="width: 100%">
            <el-input v-model="merchantForm.companyName" disabled></el-input>
          </el-form-item>
        </div>
        <div class="form-item-group">
          <el-form-item label="商户联系人：">
            <el-input v-model="merchantForm.managerName" disabled></el-input>
          </el-form-item>
          <el-form-item label="商户联系方式：">
            <el-input v-model="merchantForm.companyMobile" disabled></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 油站信息 -->
    <div class="gasDetail-info">
      <el-form :model="gasInfo" label-width="110px" :inline="true">
        <el-form-item label="油站名称：">
          <el-input v-model="gasInfo.gasName" class="lang-input" disabled></el-input>
        </el-form-item>
        <el-form-item label="油站logo：" style="height: 40px">
          <el-avatar shape="square" :src="gasInfo.gasLogoBig"></el-avatar>
        </el-form-item>
        <div>
          <el-form-item label="省份：">
            <el-select v-model="gasInfo.provinceName" placeholder="请选择" disabled>
              <el-option label="全部" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：">
            <el-select v-model="gasInfo.cityName" placeholder="请选择" disabled>
              <el-option label="全部" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区县：">
            <el-select v-model="gasInfo.countyName" placeholder="请选择" disabled>
              <el-option label="全部" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="油站地址：">
            <el-input v-model="gasInfo.gasAddress" class="lang-input" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" style="width: 120px">定位</el-button> -->
          </el-form-item>
          <el-form-item label="地理位置：">
            <el-select v-model="gasInfo.gasLocationType" placeholder="请选择" disabled>
              <el-option v-for="(item, index) in locationOptions" :key="index" :value="parseInt(index)" :label="item"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div class="map-wrap">
        <el-amap vid="amap" :zoom="zoom" :center="markerPosition" class="amap">
          <el-amap-marker vid="component-marker" :position="markerPosition"></el-amap-marker>
        </el-amap>
      </div>
      <el-form :model="gasOwner" ref="gasOwner" label-width="110px" :inline="true" style="margin-top: 20px;" :rules="gasOwnerRules">
        <el-form-item label="油站联系人：" prop="gasOwnerName">
          <el-input v-model="gasOwner.gasOwnerName" maxlength="25" :disabled="origin.type === 1"></el-input>
        </el-form-item>
        <el-form-item label="油站联系方式：" prop="gasOwnerMobile" label-width="136px">
          <el-input v-model="gasOwner.gasOwnerMobile" maxlength="20" :disabled="origin.type === 1"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 标签 -->
    <!-- <div class="foot-wrap">
      <div class="tabs-wrap" v-if="tabList">
        <div class="tabs-title">
          油站服务标签
        </div>
        <div class="tabs-item">
          <template v-for="(item, index) in tabList">
            <tab-item :key="index" :name="item"></tab-item>
          </template>
        </div>
      </div>
      <div class="img-demo">
        <el-image 
          style="width: 84px; height: 184px"
          :src="gasInfo.smallImage" 
          :preview-src-list="srcList">
        </el-image>
        <div>
          前端展示位置示例
        </div>
      </div>
    </div> -->
    <div class="btn-wrap" >
      <el-button @click="$router.go(-1)">返回</el-button>
      <el-button v-if="origin.type === 0" @click="previewSubmit" :loading="submitLoading" type="primary" style="margin-left: 60px">提交</el-button>
    </div>
  </div>
</template>
<script>
// import tabItem from './tab'
import { updateGasInfo, getGasLocationType } from '@/api/gasStationManage/gasInfo'

export default {
  name: 'gasDetail',
  components: {
    // tabItem
  },
  data () {
    return {
      origin: this.$route.params,
      merchantForm: {
        companyName: '',
        managerName: '',
        companyMobile: ''
      },
      gasInfo: {
        gasName: '',
        gasLogoBig: '',
        provinceName: '',
        cityName: '',
        countyName: '',
        gasLocationType: null,
        gasAddressLongitude: '',
        gasAddressLatitude: ''
      },
      gasOwner: {
        gasId: '',
        gasOwnerMobile: '',
        gasOwnerName: ''
      },
      gasOwnerRules:{
        gasOwnerName:[
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        gasOwnerMobile:[
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ]
      },
      zoom: 14,
      locationOptions: {},
      srcList: [],
      tabList: [],
      submitLoading: false
    }
  },
  computed: {
    markerPosition () {
      return [this.gasInfo.gasAddressLongitude, this.gasInfo.gasAddressLatitude]
    }
  },
  methods: {
    async getLocation () {
      try {
        const {code, result} = await getGasLocationType()
        if (code !== 200) return
        this.locationOptions = result
      } catch (err) {
        console.log(err)
      }
    },
    previewSubmit(){
      this.$refs['gasOwner'].validate(valid=>{
        if(valid){
          this.submit()
        }
      })
    },
    async submit () {
      const { gasId, gasOwnerMobile,gasOwnerName } = this.gasOwner
      const params = { gasId, gasOwnerMobile,gasOwnerName }
      try {
        this.submitLoading = true
        const {code, result} = await updateGasInfo(params)
        if (code !== 200) return
        if (result) {
          this.$message.success('修改成功')
          this.$router.go(-1)
        } else {
          this.$message.error('修改失败')
        }
      } catch (err) {
        console.log(err)
      } finally{
        this.submitLoading = false
      }
    }
  },
  // 商户信息接口暂时有问题 || 一旦缺少下边两个info,点击修改和详情无响应
  // beforeRouteEnter: (to, from, next) => {
  //   if (JSON.parse(localStorage.getItem('gasInfo')) && JSON.parse(localStorage.getItem('companyInfo'))) {
  //     next()
  //   } else {
  //     next('/gasStationManage/gasStationInfo')
  //   }
  // },
  async created () {
    this.getLocation()
    try {
      const gasInfo = JSON.parse(localStorage.getItem('gasInfo'))
      Object.assign(this.gasInfo, gasInfo)
      Object.assign(this.gasOwner, gasInfo)
      Object.assign(this.merchantForm, JSON.parse(localStorage.getItem('companyInfo')))
      // if (this.gasInfo.bigImage) this.srcList.push(this.gasInfo.bigImage)
      // const {code, result} = await getTags()
      // if (code !== 200) return
      // this.tabList = result
    } catch (err) {
      console.log(err)
    }
  },
  destroyed() {
    localStorage.removeItem('gasInfo')
    localStorage.removeItem('companyInfo')
  }
}
</script>
<style lang="less" scoped>
  .gasDetail-wrap {
    width: 100%;
    height: 100%;
    background: rgba(248,249,253,1);
    padding: 20px 0 10px 0;
    .merchant-info {
      min-height: 155px;
      padding-top: 30px;
      background: #fff;
      .form-item-group {
        width: 685px;
        display: flex;
        justify-content: space-between;
        &:last-child .el-input {
          width: 193px;
        }
      }
      .search-btn {
        width: 122px;
        height: 40px;
        margin-right: 15px;
      }
    }
    .gasDetail-info {
      margin-top: 20px;
      padding-top: 30px;
      background: #fff;
      .lang-input {
        width: 575px;
      }
      .map-wrap {
        width: 95%;
        height: 320px;
        .amap {
          width: 100%;
          height: 100%;
        }
      }
    }
    .foot-wrap {
      margin-top: 20px;
      margin-bottom: 30px;
      background: #fff;
      display: flex;
      .tabs-wrap {
        width: 74%;
        display: flex;
        .tabs-title {
          width: 180px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size:14px;
          font-weight:500;
          color:rgba(34,34,34,1);
        }
        .tabs-item {
          width: calc(100% - 180px);
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          div {
            margin-right: 50px;
          }
        }
      }
      .img-demo {
        width: 26%;
        text-align: center;
        padding: 10px 0;
        div {
          font-size:14px;
          color:rgba(75,126,254,1);
        }
      }
    }
    .btn-wrap {
      text-align: center;
      margin: 55px 0;
      /deep/ .el-button {
        width: 126px;
        height: 40px;
      }
    }
  }
  /deep/ .amap-logo {
    display: none;
  }
  /deep/ .amap-copyright {
    opacity:0;
  }
</style>